<template>
	<view class="p-top20" :style="{'--color':color}" v-if="pageData.length" >
		
		<view class="row bgwhite">
			<view class="row j-sb a-center padding20 bot">
				<text class="color_33 size26">课程目录共{{pageData.length}}节</text>
				<view class="iconfont icon-a-zu1725 size32 m-right20" @click="pageData.reverse()"></view>
			</view>
			
			<block v-for="(item,index) in pageData" :key="index">
			<view class="row padding20-30 bot_bor" 
			     :class="chapterId == item.chapter_id?'itemcolor':'color_66'" @click="toPlay(item)">
				<view class="flex-1 d-flex a-center">
					<text class="size28">({{index+1}})</text>
					<view class="flex-1 d-flex f-column m-left20">
						<text class="rows size28 bold ellipsis">{{item.chapter_title}}</text>
						<view class="row a-center m-top10">
							<view class="d-flex a-center m-right30">
								<view class="iconfont icon-bofang h6"></view>
								<text class="h7">{{item.play}}</text>
							</view>
							
							<view class="d-flex a-center m-right30">
								<view class="iconfont icon-shijian h6"></view>
								<text class="h7">{{item.length}}</text>
							</view>
							<text class="h7" v-if="item.chapter_percen">{{item.chapter_percent == 0?'未收听':`${item.chapter_percen}%`}}</text>
						</view>
					</view>
				</view>
				<view class="d-flex a-center" 
				      v-if="item.is_buy || item.free == 1">
					<view class="d-flex f-column a-center" v-if="item.withContent == 1 && item.video">
						<view class="iconfont icon-wengao size36"></view>
						<text class="h6">文稿</text>
					</view>
					<view class="d-flex f-column a-center m-left20" v-if="item.video">
						<view class="iconfont size36" 
						     :class="chapterId == item.chapter_id  && musicState?'icon-bofang2':'icon-bofang3'">
						</view>
						<text class="h6">{{item | isBuy}}</text>
					</view>
					<text class="h6" v-if="!item.video && item.withContent == 1">阅读</text>
				</view>
				<view class="d-flex f-column a-center"  v-else>
					 <view class="iconfont icon-jihuohuoqijiesuo size40"></view>
					 <text class="h6 m-top4">未解锁</text>
				</view>
			</view>
			</block>	
			
			
			
			
		</view>
		  <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		name:'catalogue',
		props:['chapter_list','goods_id','isPlay','info','chapter_id'],
		data() {
			return {
				showModel:false,
				pageData:[],
			}
		},
		methods: {
			...mapMutations(['setChapter_id']),
			toPlay(item){
				if(!this.vid) return this.showModel = true;
				
				if(item.is_buy == 0 && item.free == 0){
					if(!this.isPlay) return this.$emit('Unlock');
					this.$Modals('提示','需要购买后才能解锁，是否购买？','我再想想','去购买').then(res=>{
						if(res) this.toUrl(`/pages/goods/goods_detail?goods_id=${this.goods_id}`)
					})
					return;
				};
				if(this.isPlay) return this.$emit('switchPlay',item.chapter_id);
				this.toUrl(`/answer/play?chapter_id=${item.chapter_id}&goods_id=${this.goods_id}`)
			},
			
		},
		computed:{
			...mapState(['vid','bid','color','chapterId','musicState']),
		},
		watch:{
			
			chapter_list:{
				deep:true,
				immediate:true,
				handler(newVal,oldVal){
					if(!newVal) return;
					this.pageData = newVal;
				}
			}
		},
		filters:{
			isBuy(item){
				if(item.is_buy != 0) return '播放'
				return item.type ==1?'试听':'试看'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.playImg{
		width:430rpx;
		height: 430rpx;
	}
	.itemcolor{
		color:var(--color);
	}
</style>
